<template>
  <div class="UserInfoTwo">
    <el-header>
      <div class="main-NAV">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>机油保养邀约</el-breadcrumb-item>
          <el-breadcrumb-item>学习与考试</el-breadcrumb-item>
          <el-breadcrumb-item>客户建档</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </el-header>
    <div class="UserInfoTwoTitle">客户档案</div>
    <div class="UserInfoTwoContent">
      <div class="UserInfoTwoContent-main">
        <div class="main-title">吴涛</div>
        <div class="main-content">
          <div class="main-flex">
            <div>客户信息：</div>
            <div>男，37岁，公司职员</div>
          </div>
          <div class="main-flex">
            <div>车辆信息：</div>
            <div>宝马3系，BMW 3系四门轿车 G20_320i</div>
          </div>
          <div class="main-flex">
            <div>上次保养履历：</div>
            <div>2万公里时，发动机基础保养</div>
          </div>
          <div class="main-flex">
            <div>远程售后服务呼叫单：</div>
            <div>机油保养</div>
          </div>
          <div class="main-flex">
            <div>保养状态：</div>
            <div>黄灯 总公里数： 29710km</div>
          </div>
          <div class="main-flex">
            <div>周平均公里数：</div>
            <div>200km</div>
          </div>
          <div class="main-flex">
            <div>保养到期剩余时间（里程）：</div>
            <div>10days（290km）</div>
          </div>
        </div>
        <div class="main-dialog">注：可预约时间段：周六上午10:00/下午3:00</div>
      </div>
      <div class="UserInfoTwoContent-btn" @click="BeginExct">点击进入考试页面</div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'UserInfoTwo',
  data() {
    return {};
  },
  methods: {
    BeginExct() {
      this.$router.push({ name: 'VoiceTwo' });
    },
  },
  computed: {},
};
</script>
<style lang="less" scoped>
.UserInfoTwoTitle {
  height: 45px;
  background: #9e0018;
  border: 1px solid #9e0018;
  align-items: center;
  justify-content: center;
  display: flex;
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
}
.UserInfoTwoContent {
  height: 464px;
  background: #ffffff;
  border: 1px solid #dcdcdd;
}
.UserInfoTwoContent-main {
  width: 765px;
  font-size: 18px;
  font-weight: bold;
  color: #303030;
  line-height: 24px;
  margin: 0 auto;
  margin-top: 48px;
}
.main-flex {
  display: flex;
  font-size: 16px;
  font-weight: normal;
  box-sizing: border-box;
  margin: 20px 0;
  color: #303030;
}
.main-flex > div:first-of-type {
  min-width: 100px;
}
.main-dialog {
  color: #9e0018;
  font-size: 16px;
  font-weight: normal;
  box-sizing: border-box;
  padding: 10px 0;
}
.UserInfoTwoContent-btn {
  font-size: 16px;
  color: #ffffff;
  padding: 10px 0;
  box-sizing: border-box;
  height: 40px;
  background: #9e0018;
  border-radius: 5px;
  width: 272px;
  margin: 0 auto;
  margin-top: 125px;
  text-align: center;
}
.main-NAV /deep/ .el-breadcrumb__item {
  background-color: #f2f2f2 !important;
  color: #303030 !important;
  font-size: 16px !important;
  &:last-of-type .el-breadcrumb__inner {
    color: #9e0018 !important;
  }
}
</style>
